// 父传子
// 1.父组件传递数据 子组件标签身上绑定属性
// 2.子组件接受数据 props的参数
function Son (props) {
  // props:对象里面包含了父组件传递过来的所有的数据
  // 子组件只能读取props中的数据，不能直接修改，父组件的数据只能由父组件修改
  console.log(props)
  // props.name = 'new name'
  return (
    <div>this is son, {props.name},jsx:{props.child}</div>
  )
}

function App () {
  const name = 'this is app name'
  return (
    <div>
      <Son
        name={name}
        age={18}
        isTrue={false}
        list={['vue', 'react']}
        obj={{ name: 'jack' }}
        cb={() => console.log('123')}
        child={<span>this is span</span>}
      />
    </div>
  )
}

export default App
